<template>
	<div class="user-info">
		<ElAvatar :size="40" :src="row.avatar" />
		<div class="user-details">
			<div class="primary-info">
				<span class="username">{{ row.username }}</span>
				<ElTag
					:type="row.role === 'admin' ? 'danger' : 'info'"
					size="small"
					effect="plain">
					{{ row.role === "admin" ? "管理员" : "普通用户" }}
				</ElTag>
			</div>
			<div class="secondary-info">
				<span class="email">{{ row.email }}</span>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
type PropsType = {
	row: {
		id: string;
		username: string;
		email: string;
		avatar: string;
		role: string;
		createTime: string;
		lastLoginTime: string;
	}
};

const props = withDefaults<PropsType>(defineProps<PropsType>(), {
	row: {
		id: "",
		username: "",
		email: "",
		avatar: "",
		role: "",
		createTime: "",
		lastLoginTime: ""
	}
});
</script>

<style scoped lang="scss">
.user-info {
    display: flex;
    align-items: center;
    gap: 12px;

    .user-details {
        .primary-info {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;

            .username {
                font-weight: 500;
                color: var(--el-text-color-primary);
            }
        }

        .secondary-info {
            font-size: 13px;
            color: var(--el-text-color-secondary);
        }
    }
}
</style>
